<template>
  <div>
    <el-row :gutter="0" class="elrow">
      <el-col :span="4">
        <el-input v-model="articleParams.id"  size="large" placeholder="编号" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="articleParams.mobileUser" size="large" placeholder="手机号码" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="articleParams.nick" size="large" placeholder="发布人名称" />
      </el-col>
      <el-col :span="4">
        <el-select v-model="articleParams.categoryId" size="large" placeholder="分类" style="width: 200px">
          <el-option v-for="item in news" :label="item.name" :value="item.id" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input v-model="articleParams.titleLike" size="large" placeholder="标题" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="articleParams.keywordsLike" size="large" placeholder="关键词" />
      </el-col>
      <el-col :span="4">
        <el-input v-model="articleParams.tagsLike" size="large" placeholder="标签" />
      </el-col>
      <el-col :span="4">
        <el-select v-model="articleParams.isRecommend" size="large" placeholder="是否推荐" style="width: 200px">
          <el-option label="推荐" value="true" />
          <el-option label="不推荐" value="false" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="articleParams.status" size="large" placeholder="状态" style="width: 200px">
          <el-option label="待审核" value="0" />
          <el-option label="审核不通过" value="1" />
          <el-option label="审核通过" value="2" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <div class="block">
          <el-date-picker v-model="articleParams.dateAddBegin" type="date" placeholder="发布时间起" size="large" style="width: 200px" />
        </div>
      </el-col>
      <el-col :span="4">
        <div class="block">
          <el-date-picker v-model="articleParams.dateAddEnd" type="date" placeholder="发布时间止" size="large" style="width: 200px" />
        </div>
      </el-col>
      <el-col :span="4">
        <div class="block">
          <el-date-picker v-model="articleParams.dateUpdateBegin" type="date" placeholder="修改时间起" size="large" style="width: 200px" />
        </div>
      </el-col>
      <el-col :span="4">
        <div class="block">
          <el-date-picker v-model="articleParams.dateUpdateEnd" type="date" placeholder="修改时间止" size="large" style="width: 200px" />
        </div>
      </el-col>
      <el-col :span="4">
        <el-select v-model="articleParams.orderBy" size="large" placeholder="排序方式" style="width: 200px">
          <el-option label="发布时间倒序" value="newer" />
          <el-option label="发布时间顺序" value="older" />
          <el-option label="浏览量顺序" value="viewUp" />
          <el-option label="浏览量倒序" value="viewDown" />
          <el-option label="点赞数倒序" value="useful" />
        </el-select>
      </el-col>
      <el-button type="primary" size="default" :icon="Search" @click="onSearch">搜索</el-button>
      <el-button type="success" size="default" :icon="Plus" @click="goAdd">添加</el-button>
    </el-row>
  </div>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="发布人">
        <template #default="scope">
          <p>-</p>
          <p>-</p>
        </template>
      </el-table-column>
      <el-table-column prop="categoryId" label="分类" show-overflow-tooltip>
        <template #default="scope">
          {{ categoryMap[scope.row.categoryId] &&categoryMap[scope.row.categoryId].name }}
          <!-- <p v-for="item in categoryMap" v-show="item.id == scope.row.categoryId">{{item.name}}</p> -->
        </template>
      </el-table-column>
      <el-table-column property="title" label="标题" />
      <el-table-column label="状态">
        <template #default="scope"> 审核通过 </template>
      </el-table-column>
      <el-table-column property="views" label="浏览量" />
      <el-table-column label="发布/更新时间">
        <template #default="scope">
          <p>{{scope.row.dateUpdate}}</p>
          <p>{{scope.row.dateAdd}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link @click="onEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="toggleSelection([tableData[1], tableData[2]])">批量删除</el-button>
    </div>
    <el-pagination v-model:currentPage="articleParams.page" v-model:page-size="articleParams.pageSize"
    :page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
    @size-change="sizeChange" @current-change="currentChange" style="margin-top: 15px;" />
  </div>

</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElTable } from "element-plus";
import { Search, Plus } from "@element-plus/icons-vue";
import { newsList,newsCategoryList } from "../api/news"
import { useRouter } from "vue-router"
const multipleTableRef = ref("");
const multipleSelection = ref("");
const toggleSelection = ref("");
const handleSelectionChange = ref("");
let total = ref(0)
let news = ref([])
let tableData = ref([])
let categoryMap = ref([])

const router = useRouter()

// 跳转文章添加页面
function goAdd(){
  router.push("/article/add")
}

let articleParams = reactive({
  page: 1,
  pageSize: 10,
  id:"",// 文章id
  mobileUser:"", //手机号
  nick:"", // 发布人
  categoryId:"",//所属类别
  titleLike:"",//标题
  keywordsLike:"",//关键词
  tagsLike:"",//标签
  isRecommend:"",//是否推荐
  status:"",//审核状态
  dateAddBegin:"",	//发布时间起,格式 2018-05-16
	dateAddEnd:"",	//发布时间止,格式 2018-05-16
	dateUpdateBegin:"",	//修改时间起,格式 2018-05-16
	dateUpdateEnd:"",	//修改时间止,格式 2018-05-16
	orderBy:"",	//排序方式:newer，older，viewUp，viewDown，useful
})

function onSearch(){
  articleParams.page = 1;
  getList()
}

// 编辑
function onEdit(id){
  console.log(id)
  router.push({
    path:"/article/edit",
    query:{
      id
    }
  })
}

// 获取列表
function getList() {
  newsList(articleParams).then(res => {
    if(res.code===0){
      tableData.value = res.data.result
      categoryMap.value = res.data.categoryMap
    }else{
      tableData.value = []
    }
  })
}
// 获取类别
function getNewsList() {
  newsCategoryList().then(res=>{
    if(res.code === 0){
      news.value = res.data
    }
  })
}

function currentChange(val) {
  merchantParams.page = val
  getList()
}

function sizeChange(val) {
  merchantParams.page = 1
  merchantParams.pageSize = val
  getList()
}

onMounted(() => {
  getList()
  getNewsList()
})

</script>

<style lang="scss" scoped>
.el-input {
  margin-top: 5px;
  width: 200px;
  height: 40px;
}

.elrow {
  display: flex;
  align-items: center;
}

.el-table {
  margin-top: 20px;
  border-top: none;
}
</style>